<template>
	<view class="uni_box home">
		<!-- <navbar title='课程中心' :yin="true">
		</navbar> -->
		<!-- <u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" /> -->
		<view class="content">
			<Nheader @getmine="getmine"  @getsou="getsou" :keywords="keywords"></Nheader>
			<view class="htwo">
				<u-swiper :list="swlist" height="220"></u-swiper>
			</view>

			<view class="hfour">
				<view class="hfhead">
					<scroll-view class="tuilist" scroll-x>
						<view class="tuiitem" :class="typeinfo.value==item.value?'tactive':''" v-for="(item,index) in type" :key="index" @click="typeClick(item)">
							<text class="tuitit">{{item.name}}</text>
							<image class="xuans" src="/static/img/xuans.png"></image>
						</view>
					</scroll-view>
					<!-- <view class="tuishai">
						<view class="shai sactive">推荐</view>
						<view class="shai">价格最高</view>
						<view class="shai">最新</view>
						<view class="shai shaiview">
							<text>筛选</text>
							<image class="icon_sx" src="/static/img/icon_sx.png"></image>
						</view>
					</view> -->
				</view>
				<view class="jiulist">
					<view class="jiuitem" v-for="(item,index) in list" :key="index" @click.stop="moredetail(item)">
						<image class="hebg" mode=" aspectFill" :src="item.image"></image>
						<view class="jiuright">
							<text class="jname">{{item.title}}</text>
							<!-- <view class="bqian" v-if="item.tags">
								<text class="shijie" v-for="(i,ind) in item.tags">{{i}}</text>
							</view> -->
							
							<view class="zhiview">
								<view class="zhione" :class="i=='topping'?'din':''" v-for="(i,ind) in item.buts"  @click.stop="tishi">{{i=="refresh"?'刷新':'置顶'}}</view>
								<!-- <view class="zhione ">置顶</view> -->
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		components:{
		},
		data() {
			return {
				mshow:false,
				homeinfo:{
					
				},
				iseyes:false,
				token:uni.getStorageSync('token'),
				indicatorDots: true,
				autoplay: false,
				interval: 2000,
				duration: 500,

				status: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				swlist: [
					// {
					// 	image: '/static/img/xmfabu.png'
					// },
					// {
					// 	image: '/static/img/xmfabu.png'
					// },
				],
				hList:[
					{id:1,name:'测试站位',img:'/static/img/cone.png'},
					{id:2,name:'测试站位',img:'/static/img/ctwo.png'},
					{id:3,name:'测试站位',img:'/static/img/cthree.png'},
					{id:4,name:'测试站位',img:'/static/img/cfour.png'},
				],
				moreshow:false,
				newinfo:[],
				nlist:[
					'寒雨连江夜入吴',
					'平明送客楚山孤',
					'洛阳亲友如相问',
					'一片冰心在玉壶'
				],
				lamp:[
					'寒雨连江夜入吴',
					'平明送客楚山孤',
					'洛阳亲友如相问',
					'一片冰心在玉壶'
				],
				keywords:'',
				type:[],
				typeinfo:{},
				list: [],
				page: 1,
				limit: 10,
				last_page: 1,
				status: "loadmore",
			}
		},
		onLoad() {
			// this.getconfig();//公共配置
		},
		onShow() {
			this.getinit()
		},
		onPullDownRefresh() {
			// console.log("+++")
			// // uni.stopPullDownRefresh();
			// this.getstatistic();//用户资产
			// setTimeout(() => {
			// 	uni.stopPullDownRefresh();
			// }, 1000);
		},
		onReachBottom: function () {
			this.loadmore();
		},
		methods: {
			getinit(){
				this.getbanner();//banner
				// this.getnotice();//公告
				// this.fgetMenu();//菜单
				this.fgetListParams();//项目参数
			},
			async getbanner(){
				let res = await this.$u.api.quangetBanner({
					mark:'h5-quan'
				});
				// console.log(res)
				this.banner = res
				let swlist = res
				for(let i in swlist){
					swlist[i].image = swlist[i].imageurl
				}
				this.swlist = swlist
				
			},

			getgong(){
				this.navrouter("/pages/TPage/Gonglist");
			},
			getmine(){
				this.mshow = true
				uni.hideTabBar();
			},
			mineclose(){
				this.mshow = false
				uni.showTabBar();
			},
			geteyes(){
				this.iseyes = !this.iseyes
			},
			chainrecharge(){
				this.navrouter("/pages/TPage/Chongbi");
			},
			getlogin(){
				uni.redirectTo({
					url: '/pages/login/login'
				})
			},
			getinvite(){
				this.navrouter("/pages/TPage/Yaoqing?type=home");
			},
			getClear(){
				this.list = []
				this.page = 1,
				this.status= "loadmore"
				this.getList()
			},
			getsou(e){
				this.keywords = e
				this.getClear()

			},
			loadmore() {
				let page = this.page;
				if (this.status == 'loadmore') {
					this.page++;
					this.getList();
				}
			},
			async fgetListParams(){
				let res = await this.$u.api.quangetListParams({
				});
				// console.log(res)
				// this.order = res.order
				// if(res.order){
				// 	this.orderinfo = this.order[0]
				// }
				this.type = res.type
				if(res.type){
					this.typeinfo = this.type[0]
				}
				this.getList()
			},
			async getList(){//列表数据
				let res = await this.$u.api.quangetLists({
					// limit:this.limit,
					page:this.page,
					type:this.typeinfo.value,
					keywords:this.keywords,
				});
				console.log(res)
				// this.uinfo = res
				this.last_page = res.lastpage;
				let list = res.list;
				this.list = this.page == 1 ? list : [...this.list, ...list];	
				if(this.page >= this.last_page){
				  this.status = 'nomore';
				}
				
			},
			typeClick(item){
				this.typeinfo = item
				this.getClear()
			},
			moredetail(item){
				this.navrouter("/pages_subject/twoPage/Detailtwo?id="+item.id+'&leitype=2');
			},
			tishi(){
				this.$u.toast("请到悬赏主页面进行操作");
			}


		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #fff;
	}
	.content{
		background-color: #fff;
		padding-bottom: 130rpx;
		min-height: 100vh;
		.asset{
			margin: 50rpx 45rpx;
			.Total-assets{
				display: flex;
				flex-direction: row;
				align-items: center;
				padding: 0 16rpx;
				.zileft{
					display: flex;
					flex-direction: column;
					.zione{
						display: flex;
						flex-direction: row;
						align-items: center;
						.zname{
							font-family: Source Han Sans CN;
							font-weight: bold;
							font-size: 30rpx;
							color: #111111;
							display: inline-block;
							margin-right: 15rpx;
						}
						.yan{
							width: 44rpx;
							height: 30rpx;
						}
					}
					.zinum{
						margin-top: 43rpx;
						font-family: Source Han Sans CN;
						font-weight: bold;
						font-size: 50rpx;
						color: #111111;
					}
				}
				.tu{
					margin-left: auto;
					width: 173rpx;
					height: 149rpx;
				}
			}
			.lian{
				height: 80rpx;
				background: #030000;
				border-radius: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: Source Han Sans CN;
				font-weight: 500;
				font-size: 30rpx;
				color: #FFFFFF;
				margin: 60rpx 0 53rpx;
			}
		}

		.htwo{
			padding:20rpx 30rpx 0;
			/deep/.u-indicator-item-round-active {
				// width: 17px;
				background-color: rgba(89, 255, 246, 1);
			}
		}
		.hthree{
			margin: 40rpx 30rpx 0;
			
			.hlist{
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				.hitem{
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					width: 25%;
					margin-bottom: 40rpx;
					.hicon{
						width: 100rpx;
						height: 100rpx;
						margin-bottom: 8rpx;
					}
					text{
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #666666;
					}
				}
			}
		}
		.gongview{
			margin: 30rpx 30rpx 0;
			background: #F5F5F5;
			border-radius: 5rpx;
			padding: 20rpx;
			display: flex;
			align-items: center;
			flex-direction: row;
			.gongicon{
				width: 40rpx;
				height: 40rpx;

			}
			.gxian{
				width: 1rpx;
				height: 20rpx;
				background: #CCCCCC;
				display: inline-block;
				margin: 0 20rpx;
			}
			.gongcont{
				flex: 1;
				display: flex;
				width: 70%;
				/deep/.u-notice-bar{
					padding: 0 !important;
				}
			}
		}
		.refu{
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-bottom: 40rpx;
			.remen{
				margin-right: 4rpx;
				width: 40rpx;
				height: 40rpx;
			}
		}
		.htit{
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 36rpx;
			color: #111111;
			display: block;
			
		}
		.hfour{
			padding: 0 0rpx;
			margin-top: 20rpx;
			.hfhead{
				display: flex;
				flex-direction: column;
				// align-items: center;
				background: #F5F5F5;
				border-radius: 30rpx 30rpx 0rpx 0rpx;
				padding: 30rpx;
				.tuilist{
					white-space: nowrap;
					.tuiitem{
						display: inline-block;
						position: relative;
						padding: 18rpx 0;
						margin-right: 60rpx;
						.tuitit{
							font-family: PingFang SC;
							font-weight: bold;
							font-size: 28rpx;
							color: #000000;
						}
						.xuans{
							width: 100%;
							height: 15rpx;
							position: absolute;
							left: 0%;
							bottom: 0;
							display: none;
						}
					}
					.tactive{
						.tuitit{
							background: linear-gradient(-82deg, #4BB6F0 0%, #1D8DFD 98.53515625%);
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;

						}
						.xuans{
							display: inline-block;
						}
					}
				}
				.tuishai{
					display: flex;
					flex-direction: row;
					margin-top: 20rpx;
					align-items: center;
					.shai{
						padding: 15rpx 20rpx;
						margin-right: 20rpx;
						background: #FFFFFF;
						border-radius: 10rpx;
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 20rpx;
						color: #51565D;
					}
					.sactive{
						background: linear-gradient(-82deg, #4BB6F0, #1D8DFD);
						color: #fff;
					}
					.shaiview{
						margin-left: auto;
						display: flex;
						flex-direction: row;
						align-items: center;
						margin-right: 0;
						.icon_sx{
							margin-left: 12rpx;
							width: 12rpx;
							height: 12rpx;
						}
					}
				}

				.htittwo{
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 36rpx;
					color: #111111;
					display: inline-block;

				}
				.gengview{
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-left: auto;
					.geng{
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #999999;
					}
					.icon_next{
						margin-left: 4rpx;
						width: 24rpx;
						height: 24rpx;
					}
				}
			}
			.jiulist{
				.jiuitem{
					padding: 30rpx;
					display: flex;
					flex-direction: row;
					border-bottom: 1rpx solid #EEEEEE;;
					// align-items: center;
					.hebg{
						width: 180rpx;
						height: 180rpx;
						border-radius: 10rpx;
						margin-right: 20rpx;
					}
					.jiuright{
						display: flex;
						flex-direction: column;
						flex: 1;
						.jname{
							font-family: PingFang SC;
							font-weight: bold;
							font-size: 31rpx;
							color: #000000;
							
						}
						.pjia{
							font-family: PingFang SC;
							font-weight: bold;
							font-size: 28rpx;
							color: #FF4545;
							display: block;
							margin-top: auto;
						}
						.pnum{
							font-size: 35rpx;
						}
						.bqian{
							margin-top: 16rpx;
							display: flex;
							flex-direction: row;
							align-items: center;
						}
						.shijie{
							font-family: PingFang SC;
							font-weight: 500;
							font-size: 18rpx;
							color: #909AAB;
							display: inline-block;
							margin-right: 10rpx;
						}
						.qian{
							display: flex;
							flex-direction: row;
							align-items: center;
							margin: 15rpx;
							.qianjiu{
								padding: 9rpx 12rpx;
								background: #EEEEEE;
								border-radius: 4rpx;
								font-family: PingFang SC;
								font-weight: 500;
								font-size: 20rpx;
								color: #51565D;
							}
						}
						.zhiview{
							margin-top: auto;
							display: flex;
							align-items: center;
							justify-content: flex-end;
							.zhione{
								padding: 15rpx 25rpx;
								// background: linear-gradient(-82deg, #4BB6F0, #1D8DFD);
								border-radius: 12rpx;
								border: 1px solid #46B2F2;
								font-family: PingFang SC;
								font-weight: 500;
								font-size: 24rpx;
								color: #46B2F2;
								margin-left: 20rpx;
							}
							.din{
								background: linear-gradient(-82deg, #4BB6F0, #1D8DFD);
								border: none;
								color: #fff;
							}
						}
						.yanview{
							display: flex;
							margin-top: auto;
							flex-direction: row;
							align-items: center;
							.yantime{
								font-family: PingFang SC;
								font-weight: 400;
								font-size: 24rpx;
								color: #999999;
							}
							.icon_eye_s{
								margin-left: auto;
								margin-right: 9rpx;
								width: 28rpx;
								height: 28rpx;
							}
							.yuenum{
								font-family: PingFang SC;
								font-weight: 400;
								font-size: 24rpx;
								color: #999999;
							}

						}
					}
				}
			}
		}
	}
</style>
